import { MaterialIcons } from "@expo/vector-icons";
import React, { useState } from "react";
import {
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from "react-native";
import ColorPicker from "react-native-wheel-color-picker";

interface BackgroundEditorProps {
  onColorSelect: (color: string) => void;
  onImageSelect: (imageUri: string) => void;
  onGradientSelect: (gradient: string[]) => void;
  onPatternSelect: (pattern: string) => void;
  currentTab?: "color" | "image" | "gradient" | "pattern";
}

// 背景颜色数据
const backgroundColors = [
  "#FFFFFF", "#F5F5F5", "#E0E0E0", "#BDBDBD", "#9E9E9E", "#757575",
  "#424242", "#212121", "#000000", "#F44336", "#E91E63", "#9C27B0",
  "#673AB7", "#3F51B5", "#2196F3", "#03A9F4", "#00BCD4", "#009688",
  "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800",
  "#FF5722", "#795548", "#607D8B",
];

// 背景图片数据
const backgroundImages = [
  { key: "bg1", source: "https://picsum.photos/200/200?random=1" },
  { key: "bg2", source: "https://picsum.photos/200/200?random=2" },
  { key: "bg3", source: "https://picsum.photos/200/200?random=3" },
  { key: "bg4", source: "https://picsum.photos/200/200?random=4" },
  { key: "bg5", source: "https://picsum.photos/200/200?random=5" },
  { key: "bg6", source: "https://picsum.photos/200/200?random=6" },
  { key: "bg7", source: "https://picsum.photos/200/200?random=7" },
  { key: "bg8", source: "https://picsum.photos/200/200?random=8" },
  { key: "bg9", source: "https://picsum.photos/200/200?random=9" },
  { key: "bg10", source: "https://picsum.photos/200/200?random=10" },
  { key: "bg11", source: "https://picsum.photos/200/200?random=11" },
  { key: "bg12", source: "https://picsum.photos/200/200?random=12" },
];

// 渐变数据
const gradients = [
  { key: "grad1", colors: ["#FF6B6B", "#4ECDC4"] },
  { key: "grad2", colors: ["#A8E6CF", "#FFD3A5"] },
  { key: "grad3", colors: ["#FD79A8", "#FDCB6E"] },
  { key: "grad4", colors: ["#6C5CE7", "#A29BFE"] },
  { key: "grad5", colors: ["#74B9FF", "#0984E3"] },
  { key: "grad6", colors: ["#00CEC9", "#00B894"] },
  { key: "grad7", colors: ["#FDCB6E", "#E17055"] },
  { key: "grad8", colors: ["#A29BFE", "#6C5CE7"] },
  { key: "grad9", colors: ["#FF9FF3", "#FECA57"] },
  { key: "grad10", colors: ["#48DB71", "#0ABFBC"] },
  { key: "grad11", colors: ["#FF6B9D", "#C44569"] },
  { key: "grad12", colors: ["#4ECDC4", "#44A08D"] },
];

// 图案数据
const patterns = [
  { key: "pattern1", name: "点状", source: "https://picsum.photos/100/100?random=101" },
  { key: "pattern2", name: "条纹", source: "https://picsum.photos/100/100?random=102" },
  { key: "pattern3", name: "格子", source: "https://picsum.photos/100/100?random=103" },
  { key: "pattern4", name: "波浪", source: "https://picsum.photos/100/100?random=104" },
  { key: "pattern5", name: "几何", source: "https://picsum.photos/100/100?random=105" },
  { key: "pattern6", name: "花朵", source: "https://picsum.photos/100/100?random=106" },
  { key: "pattern7", name: "星星", source: "https://picsum.photos/100/100?random=107" },
  { key: "pattern8", name: "心形", source: "https://picsum.photos/100/100?random=108" },
];

export const BackgroundEditor: React.FC<BackgroundEditorProps> = ({
  onColorSelect,
  onImageSelect,
  onGradientSelect,
  onPatternSelect,
  currentTab = "color",
}) => {
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [selectedColor, setSelectedColor] = useState("#FF0000");

  // 渲染颜色网格
  const renderColorGrid = () => (
    <View style={styles.itemGrid}>
      {backgroundColors.map((color, index) => (
        <TouchableOpacity
          key={index}
          style={styles.itemContainer}
          onPress={() => onColorSelect(color)}
        >
          <View style={[styles.colorPreview, { backgroundColor: color }]}>
            {color === "#FFFFFF" && <View style={styles.whiteBorder} />}
          </View>
        </TouchableOpacity>
      ))}
      {/* 色盘按钮 */}
      <TouchableOpacity
        style={styles.itemContainer}
        onPress={() => setShowColorPicker(true)}
      >
        <View style={styles.colorPickerButton}>
          <MaterialIcons name="palette" size={16} color="#666" />
        </View>
      </TouchableOpacity>
    </View>
  );

  // 渲染图片网格
  const renderImageGrid = () => (
    <View style={styles.itemGrid}>
      {backgroundImages.map((image) => (
        <TouchableOpacity
          key={image.key}
          style={styles.itemContainer}
          onPress={() => onImageSelect(image.source)}
        >
          <View style={styles.imagePreview}>
            <Image source={{ uri: image.source }} style={styles.image} />
          </View>
        </TouchableOpacity>
      ))}
    </View>
  );

  // 渲染渐变网格
  const renderGradientGrid = () => (
    <View style={styles.itemGrid}>
      {gradients.map((gradient) => (
        <TouchableOpacity
          key={gradient.key}
          style={styles.itemContainer}
          onPress={() => onGradientSelect(gradient.colors)}
        >
          <View style={[styles.gradientPreview, {
            backgroundColor: gradient.colors[0],
          }]}>
            <View style={[styles.gradientOverlay, {
              backgroundColor: gradient.colors[1],
            }]} />
          </View>
        </TouchableOpacity>
      ))}
    </View>
  );

  // 渲染图案网格
  const renderPatternGrid = () => (
    <View style={styles.itemGrid}>
      {patterns.map((pattern) => (
        <TouchableOpacity
          key={pattern.key}
          style={styles.itemContainer}
          onPress={() => onPatternSelect(pattern.source)}
        >
          <View style={styles.patternPreview}>
            <Image source={{ uri: pattern.source }} style={styles.pattern} />
          </View>
        </TouchableOpacity>
      ))}
    </View>
  );

  // 获取当前分类的内容
  const getCurrentContent = () => {
    switch (currentTab) {
      case "color":
        return renderColorGrid();
      case "image":
        return renderImageGrid();
      case "gradient":
        return renderGradientGrid();
      case "pattern":
        return renderPatternGrid();
      default:
        return renderColorGrid();
    }
  };

  return (
    <View style={styles.container}>
      {/* 内容列表 */}
      <ScrollView
        showsVerticalScrollIndicator={false}
        style={styles.contentList}
        contentContainerStyle={styles.contentListContainer}
      >
        {getCurrentContent()}
      </ScrollView>

      {/* 颜色选择器弹出层 */}
      {showColorPicker && (
        <View style={styles.colorPickerModal}>
          <View style={styles.colorPickerHeader}>
            <Text style={styles.colorPickerTitle}>选择颜色</Text>
            <TouchableOpacity onPress={() => setShowColorPicker(false)}>
              <MaterialIcons name="close" size={24} color="#666" />
            </TouchableOpacity>
          </View>
          <View style={styles.colorPickerContainer}>
            <ColorPicker
              color={selectedColor}
              onColorChange={(color) => {
                setSelectedColor(color);
                onColorSelect(color);
              }}
              thumbSize={30}
              sliderSize={30}
              noSnap={true}
              row={false}
              swatches={false}
              discrete={false}
            />
          </View>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
  },
  contentList: {
    backgroundColor: "#fff",
    maxHeight: 200,
  },
  contentListContainer: {
    paddingHorizontal: 15,
    paddingTop: 15,
    paddingBottom: 15,
  },
  itemGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    paddingHorizontal: 0,
  },
  itemContainer: {
    width: "22%", // 每行显示4个
    aspectRatio: 1, // 正方形
    marginBottom: 15,
    marginRight: "3%",
    borderRadius: 8,
    overflow: "hidden",
    position: "relative",
  },
  colorPreview: {
    width: "100%",
    height: "100%",
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
  },
  whiteBorder: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    borderRadius: 7,
    borderWidth: 1,
    borderColor: "#ddd",
  },
  colorPickerButton: {
    width: "100%",
    height: "100%",
    borderRadius: 8,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#ddd",
  },
  imagePreview: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f0f0f0",
    borderRadius: 8,
    overflow: "hidden",
  },
  image: {
    width: "100%",
    height: "100%",
    borderRadius: 8,
  },
  gradientPreview: {
    width: "100%",
    height: "100%",
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
    overflow: "hidden",
  },
  gradientOverlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    borderRadius: 8,
    opacity: 0.9,
  },
  patternPreview: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f0f0f0",
    borderRadius: 8,
    overflow: "hidden",
  },
  pattern: {
    width: "100%",
    height: "100%",
    borderRadius: 8,
  },
  colorPickerModal: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "#fff",
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    padding: 16,
  },
  colorPickerHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 16,
  },
  colorPickerTitle: {
    fontSize: 16,
    color: "#222",
    fontWeight: "500",
  },
  colorPickerContainer: {
    height: 200,
    marginBottom: 20,
  },


});
